<template>
  <div>
    <el-cascader ref="cascaderArr" v-model="editRegionNo" :options="options" :props="defaultProps" :disabled="codeDisable" :show-all-levels="showAllLevels" clearable :placeholder="placeholder" @change="change" />
  </div>
</template>

<script>
import { chooseRegionCustom } from '@/api/user'
export default {
  components: {},
  props: {
    code: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    codeDisable: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Array, String],
      default: () => []
    },
    // 是否显示完整地址，false显示最后一级
    showAllLevels: {
      type: Boolean,
      default: true
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否返回全部节点数据
    emitPath: {
      type: Boolean,
      default: false
    },
    // 延迟加载数据时间 默认2秒，单位毫秒
    sleepTime: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      areaNames: '',
      options: [],
      defaultProps: {
        value: 'no',
        label: 'name',
        emitPath: this.emitPath,
        checkStrictly: true,
        multiple: this.multiple
      }
    }
  },
  computed: {
    editRegionNo: {
      get() {
        console.log('get() this.value', this.value)
        return this.value
      },
      set(val) {
        console.log('set(val)', val)
        this.$emit('update:value', val)
      }
    }
  },
  mounted() {
    this.getRegion()
  },
  methods: {
    change() {
      const checkedNode = this.$refs['cascaderArr'].getCheckedNodes()
      this.$emit('change', checkedNode)
    },
    // 获取行政区划
    getAddress() {
      if (this.$store.getters.region.length > 0) {
        this.options = this.$store.getters.region
      } else {
        setTimeout(() => {
          this.options = this.$store.getters.region
        }, this.sleepTime)
      }
    },
    getRegion() {
      console.log('this.code', this.code)
      chooseRegionCustom(this.code).then((res) => {
        if (res.status === 0) {
          this.options = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.el-cascader{
  width:100%;
}
</style>
